<template>
  <div class="app-container">
    <h2 class="con-title">订单列表</h2>
    <div class="btn-box">
      <div style="float:right;">
        <el-button type="primary" size="mini" @click="dialogVisible = true">导入发货信息</el-button>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
          <el-upload class="upload" ref="upload" action="submitUrl" :limit="1" :auto-upload="false" :before-upload="beforeUpload" accept=".xls,.xlsx">
            <el-button size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">请严格按照模板格式上传文件，文件格式为.xls或.xlsx</div>
          </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitUpload">确 定</el-button>
            <el-button @click="clearUploadedFile">取 消</el-button>
          </span>
        </el-dialog>
        <el-button type="primary" icon="el-icon-download" size="mini" @click="tmpDownload" :loading="downloadLoading">下载模板</el-button>
      </div>
    </div>
    <div class="source">
      <div class="input-line">
        <div class="input-inline">
          <label class="input-label">订单编号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.orderCode">
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">商品货号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.goodsCode">
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">结算状态：</label>
          <div class="el-input" style="width:180px">
            <el-select v-model="listQuery.orderSettleStatus" clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">物流单号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.expressNumber">
          </div>
        </div>
      </div>
      <div class="input-line">
        <div class="input-inline">
          <label class="input-label">收件人姓名：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="receiver">
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">收件人手机号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.orderPhone">
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">下单时间：</label>
          <div class="el-input" style="width:180px">
            <el-date-picker v-model="listQuery.startDate" type="date" placeholder="选择日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <div class="form-mid">-</div>
          <div class="el-input" style="width:180px">
            <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptions2" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </div>
      </div>
      <el-button type="primary" icon="el-icon-search" style="position: absolute;top:20px;right:20px;" size="small" @click="searchSubmit">搜索</el-button>
    </div>
    <div class="btn-box">
      <div>
        <!--<el-button type="primary" size="mini" @click="lower">标记无货</el-button>-->
        <el-button type="primary" icon="el-icon-download" size="mini" @click="exportOrderInfo" :loading="downloadLoading">导出订单</el-button>
      </div>
    </div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane v-for="item in orderCountList" :label="item.orderTitle+'（'+item.orderNum+'）'" :key='item.orderStatus' :name='item.orderStatus+""'>
        <!--<keep-alive>-->
          <tab-order ref="tabOrder" v-if='activeName==item.orderStatus' :orderStatus='item.orderStatus' :orderList='listQuery' @create='showCreatedTimes'></tab-order>
        <!--</keep-alive>-->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import tabOrder from './components/tabOrder'
import { getOrderCount } from '@/api/list'
import { exportOrderDeliverMB } from '@/api/list'
import { exportOrderInfo } from '@/api/list'
import { importOrderDeliver } from '@/api/list'

export default {
  name: 'tab',
  components: {
    tabOrder
  },
  data() {
    return {
      orderCountList: [],
      activeName: '0',
      createdTimes: 0,
      downloadLoading: false,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          return time.getTime() < this.value1
        }
      },
      receiver: '',
      orderStatus: '',
      listQuery: {
        pageIndex: 1,
        pageSize: 20,
        orderStatus: '',
        orderSettleStatus: '',
        orderCode: '',
        goodsCode: '',
        expressNumber: '',
        receiver: '',
        orderPhone: '',
        startDate: '',
        endDate: ''
      },
      options: [{
        value: '0',
        label: '未结算'
      }, {
        value: '1',
        label: '已结算'
      }],
      endDate: '',
      dialogVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    },
    // 列表加载
    fetchData() {
      getOrderCount().then(res => {
        this.orderCountList = res.data.orderCountList
      })
    },
    searchSubmit() {
      // 结束日期加一天
      if (this.endDate !== '') {
        const date = new Date(this.endDate)
        // 加一天
        const time = date.setDate(date.getDate() + 1)
        // 使用filters 里使用
        this.listQuery.endDate = this.$options.filters.formatDate(time, 'yyyy-MM-dd')
      }
      this.listQuery.pageIndex = 1
      this.listQuery.receiver = encodeURI(this.receiver)
      this.$refs.tabOrder[0].getOrder()
    },
    lower() {
      this.$refs.tabOrder[0].lower()
    },
    // 下载模板
    tmpDownload() {
      this.downloadLoading = true
      exportOrderDeliverMB().then(res => {
        location.href = res.data.fileUrl
        this.downloadLoading = false
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      })
    },
    exportOrderInfo() {
      this.downloadLoading = true
      exportOrderInfo(this.listQuery).then(res => {
        location.href = res.data.fileUrl
        this.downloadLoading = false
        this.$message({
          message: '操作成功',
          type: 'success'
        })
      })
    },
    // 上传文件
    submitUpload() {
      this.$refs.upload.submit()
    },
    beforeUpload(file) {
      // 使用自己的上传方法
      const fileData = new FormData() // 创建form对象
      // file 的键要是接口提供的值
      fileData.append('orderDeliverFile', file)
      const params = {
        orderDeliverFile: file.name
      }
      // 上传文件,需要将文件data单独传，签名参数单独传
      importOrderDeliver(fileData, params)
        .then(res => {
          if (res.status === 200) {
            this.$message.success(res.info)
            this.dialogVisible = false
          }
        })
      return false
    },
    clearUploadedFile() {
      this.$refs.upload.clearFiles()
      this.dialogVisible = false
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
@import 'src/assets/css/jx-order.scss'
</style>
